<!--
 * @Description: 第二十二章（transition-group过度列表） 状态过度
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-17 23:02:26
-->
<template>
  <div>
    <h1>第二十二章（transition-group过度列表） 状态过度</h1>
    <div class="container">
      <div>
        <h2>状态过度</h2>

        <div>
          <input v-model="num.current" type="number" step="20" />
          <p>{{ num.tweenedNumber.toFixed(0) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'

const num = reactive({
  current: 0,
  tweenedNumber: 0,
})

watch(
  () => num.current,
  (newVal, oldVal) => {
    gsap.to(num, {
      // duration 秒
      duration: 1,
      tweenedNumber: newVal,
    })
  },
)
</script>
<style scoped lang="less">
h1,
h2 {
  margin: 20px 0;
}

.container {
  display: flex;
  flex-direction: column;
}
</style>
